import React from "react";
import frame from '../../../style/frame.less';

import Toperate from './toperate';
import Tbody from './tbody';
import Thead from './thead';
import Tpage from './tpage';
import TColGroup from './tcolGroup';

class Table extends React.Component {

    constructor(props) {
        super(props);
    }

    onScrollHandle(offset, event) {
        const clientWidth = event.target.clientWidth;
        const scrollWidth = event.target.scrollWidth;
        const scrollLeft = event.target.scrollLeft;
        // const isRight = (clientWidth + parseInt(scrollLeft) + offset === scrollWidth);
        this.titleNode.scrollLeft = scrollLeft * ((this.titleNode.scrollWidth - this.titleNode.clientWidth) / (scrollWidth - clientWidth));
    }

    componentDidMount() {
        if (this.contentNode) {
            this.contentNode.addEventListener('scroll', this.onScrollHandle.bind(this, 0));
        }
    }

    componentWillUnmount() {
        if (this.contentNode) {
            this.contentNode.removeEventListener('scroll', this.onScrollHandle.bind(this, 0));
        }
    }
//TODO 使用div 元素改写整体表格组件
    render() {
        return (
            <div className={frame.panelContent} style={{margin: '0 -1.5vh', boxShadow:'none'}} >

                {/*<Toperate operation={this.props.operation}></Toperate>*/}

                <div style={{height:'4.5vh', overflow:'hidden'}}>
                    <div ref={ node => this.titleNode = node} className={frame.tableMain} style={{paddingRight: '15px', 'background': '#e2e6ec', height: '7vh', overflowY: 'hidden'}}>
                        <table border="0" cellPadding="0" cellSpacing="0" width="100%" >
                            <TColGroup title={this.props.title}></TColGroup>
                            <Thead title={this.props.title}></Thead>
                        </table>
                    </div>
                </div>

                <div ref={ node => this.contentNode = node} className={frame.tableMain} style={{height: '36vh'}}>
                    <table style={{margin: '0 0 10px 0'}} border="0" cellPadding="0" cellSpacing="0" width="100%">
                        <TColGroup title={this.props.title}></TColGroup>
                        <Tbody title={this.props.title} data={this.props.data}></Tbody>
                    </table>
                </div>

                {/*<Tpage></Tpage>*/}
            </div>
        )
    }
}

export default Table
